#@adminLayout()
#define main()
<div class="jbolt_page" data-key="/auth/mall/retailer" >
    <div class="jbolt_page_title">
        <h1>图片上传</h1>
    </div>
    <div class="jbolt_page_content">
        <div class="row">
            <div class="col-12">

                <div class="form-group row">
                    <label class="col-form-label">商家名称</label>
                    <div class="col-7  ">
                        <input class="form-control" type="text" data-rule="required"   readonly="readonly" name="retailer_name" value="#(retailer.name??)">
                    </div>
                </div>

                <form  onsubmit="return false;"  id="retailerFormImg" action="/auth/mall/retailer/update_license_image" method="post">
                    #if(retailer.id??)
                    <input type="hidden" name="retailer.id" value="#(retailer.id)" />
                    #end
                    <input type="hidden"  data-rule="required" readonly="readonly" data-tips="请选择图片上传" name="imgUploadDemo" id="imgUploadDemo" value="#(retailer.license_image??)" class="form-control"/>
                    <small class="text-danger">点击上传图片</small>
                    <img id="image" tooltip data-title="点击查看大图" src="#realImage(retailer.license_image??,'/assets/img/uploadimg.png')" alt="" style="width: 300px;height: 250px">
                </form>

                <input  type="file" name="file" id="file" accept="image/*" value="选择文件" >

                <div class="form-group text-center">
                    <button type="button" id="upload" value="upload" class="btn btn-success" ><i class="fa fa-check mr-2"></i>提交</button>
                </div>

            </div>
        </div>
    </div>
</div>
#end

#define js()
<script type="text/javascript" src="/assets/js/jquery-min.js"></script>
<script type="text/javascript" src="https://unpkg.com/qiniu-js@2.5.4/dist/qiniu.min.js"></script>


<script type="text/javascript" >

    var inputBox = document.getElementById("file");
    var img = document.getElementById("image");
    $(function () {
        $("#file").on("change", function ()  {
            var reader = new FileReader();
            reader.readAsDataURL(inputBox.files[0]);//发起异步请求
            reader.onload = function () {
                //读取完成后，将结果赋值给img的src
                img.src = this.result
            }
        })
    })




    $(function () {
        $("#upload").on("click", function () {
            var obj = $("#file");
            var fileName = obj.val();//上传的本地文件绝对路径
            var suffix = fileName.substring(fileName.lastIndexOf("."),fileName.length);//后缀名
            var file = obj.get(0).files[0];	                                           //上传的文件
            var size = file.size > 1024 ? file.size / 1024 > 1024 ? file.size / (1024 * 1024) > 1024 ? (file.size / (1024 * 1024 * 1024)).toFixed(2) + 'GB' : (file.size
                / (1024 * 1024)).toFixed(2) + 'MB' : (file.size
                / 1024).toFixed(2) + 'KB' : (file.size).toFixed(2) + 'B';		   //文件上传大小
            //七牛云上传
            $.ajax({
                type:'post',
                url: "/auth/mall/Qn/QiniuUpToken",
                data:{"suffix":suffix},
                dataType:'json',
                success: function(result){

                    if(result.success == 1){

                        var observer = {
                            //设置上传过程的监听函数

                            next(result){                        //上传中(result参数带有total字段的 object，包含loaded、total、percent三个属性)
                                Math.floor(result.total.percent);//查看进度[loaded:已上传大小(字节);total:本次上传总大小;percent:当前上传进度(0-100)]
                            },
                            error(err){

                                alert("上传失败！"+err.message);
                            },
                            complete(res){
                                //成功后
                                // ?imageView2/2/h/100：展示缩略图，不加显示原图
                                // ?vframe/jpg/offset/0/w/480/h/360：用于获取视频截图的后缀，0：秒，w：宽，h：高

                                $("#image").attr("src","http://"+result.domain+"/"+result.imgUrl+"?i");
                                $("#imgUploadDemo").val("http://"+result.domain+"/"+result.imgUrl+"?i");
                                RefreshsubmitForm(retailerFormImg);
                            }
                        };
                        var putExtra = {
                            fname: "",                          //原文件名
                            params: {},                         //用来放置自定义变量
                            mimeType: null                      //限制上传文件类型
                        };
                        var config = {
                            region:qiniu.region.z2,             //存储区域(z0:代表华东;z2:代表华南,不写默认自动识别)
                            concurrentRequestLimit:3            //分片上传的并发请求量
                        };
                        var observable = qiniu.upload(file,result.imgUrl,result.token,putExtra,config);
                        var subscription = observable.subscribe(observer);          // 上传开始
                        // 取消上传
                        // subscription.unsubscribe();



                    }else{

                        alert("获取凭证失败");                  //获取凭证失败
                    }



                },error:function(){                             //服务器响应失败处理函数
                    alert("服务器繁忙");
                }
            });
        })
    })


</script>
#end
